/*---------------------百度地图相关-------------------------*/
$(function(){

//准备好DOM，初始Echarts实例
var el = $(".ZDtoMAP_map")[0];
var myChart = echarts.init(el);
//在地图上显示的数据
function getseries(zd){
    var color = "green";
    var arr = [];    
    for(var i=0;i<zd.length;i++){
        if(zd[i].state=='正常') color = "blue";
        if(zd[i].state=='网络异常') color = "red";
        if(zd[i].state=='缺纸') color = "#FF9900";
        if(zd[i].state=='缺墨') color = "#111111";
        arr.push(
            {
                //城市名字
                name: zd[i].name,
                //类型--effectScatter--点、发散的
                type:'effectScatter',
                //设置显示的地图
                coordinateSystem:'bmap',
                //堆叠等级
                zlevel:2,
                showEffectOn:'render',
                //涟漪特效
                rippleEffect:{
                    //stroke、fill
                    brushType:'stroke',
                    scale: 3*KO
                },
                // symbol:'xx.png',   //使用图片
                symbolSize:12*KO,
                itemStyle: {
                    normal: {
                        color: color   //点的颜色
                    }
                },
                data: [{name:zd[i].name, value: zd[i].point.concat(9)}]                            
            }
        );
    }
    return arr;
}
var series = getseries(zd);
console.log(series)

var option = {
    tooltip:{
        //触发类型  数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        trigger:'item',
        formatter:'<div style="font-size:0.2rem;padding:0.1rem 0.15rem;">{a}</div>'
    },
    //地图配置
    bmap:{
        //设置地图中心点
        center: [114.078117,22.547795],
        //地图缩放级别
        zoom:13,
        //是否允许拖拽
        roam:true,
    },
    series:series,
};
//添加配置项和数据
myChart.setOption(option);


//初始化显示百度地图与 echarts 结合图形。
//获取百度地图实例
var map = myChart.getModel().getComponent('bmap').getBMap();
// map.disableDragging();         //禁用地图拖拽事件
map.disableScrollWheelZoom();  //禁用地图滚轮放大缩小，默认禁用(可不写)
map.disableDoubleClickZoom();  //禁用鼠标双击放大
map.disableKeyboard();         //禁用键盘上下左右键移动地图，默认禁用(可不写)

var cityName = '福田区'; 
var bdary = new BMap.Boundary();
var res = null;
function ply(res){
  map = myChart.getModel().getComponent('bmap').getBMap(); 
  //map.disableDragging();       //禁用地图拖拽事件
  map.disableScrollWheelZoom();  //禁用地图滚轮放大缩小，默认禁用(可不写)
  map.disableDoubleClickZoom();  //禁用鼠标双击放大
  map.disableKeyboard();         //禁用键盘上下左右键移动地图，默认禁用(可不写)
  var EN_JW = "180, 90;";         //东北角
  var NW_JW = "-180,  90;";       //西北角
  var WS_JW = "-180, -90;";       //西南角
  var SE_JW = "180, -90;";        //东南角
  //4.添加环形遮罩层
  var ply1 = new BMap.Polygon(res.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor:"rgba(0,0,0,0.3)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
  map.addOverlay(ply1); 
  // $("#map_main").css('opacity',0.85); 
  //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
  var ply = new BMap.Polygon(res.boundaries[0], { strokeWeight: 2, strokeColor: "#aaa",fillColor: "" });
  map.addOverlay(ply); 
  //map.setViewport(ply.getPath());    //调整视野    
}
bdary.get(cityName, function (rs) {       //获取行政区域      
  res = rs;  
  ply(res)
});


var initData = JSON.parse( JSON.stringify(option));

//图形上的点击事件
myChart.on('click',function(e){
    var scale = map.getZoom();    //当前地图的放级别
    var index = e.seriesIndex;
    var op = initData;
    op.series[index].symbolSize = 24*KO;
    op.series[index].rippleEffect.scale = 8*KO;
    op.bmap.zoom = scale;
    op.bmap.center = [map.getCenter().lng , map.getCenter().lat];  //设置地图中心点为当前中心点
    myChart.setOption(op)

    // zdinfo_show(e.name);

    //map.setZoom(10)  设置地图的放大级别
    map = myChart.getModel().getComponent('bmap').getBMap();
    //map.disableDragging();//禁用地图拖拽事件
    map.disableScrollWheelZoom();//禁用地图滚轮放大缩小，默认禁用(可不写)
    map.disableDoubleClickZoom();//禁用鼠标双击放大
    map.disableKeyboard();//禁用键盘上下左右键移动地图，默认禁用(可不写)
})






$(".map_big").click(function(){
  var scale = map.getZoom();
  scale++;
  map.setZoom(scale);
  setTimeout(function(){
      map.disableScrollWheelZoom(); //禁用地图滚轮放大缩小，默认禁用(可不写)
      map.disableDoubleClickZoom(); //禁用鼠标双击放大
      map.disableKeyboard();        //禁用键盘上下左右键移动地图，默认禁用(可不写)
  },100)  
})
$(".map_small").click(function(){
  var scale = map.getZoom();
  scale--;
  map.setZoom(scale);
  setTimeout(function(){
      map.disableScrollWheelZoom(); //禁用地图滚轮放大缩小，默认禁用(可不写)
      map.disableDoubleClickZoom(); //禁用鼠标双击放大
      map.disableKeyboard();        //禁用键盘上下左右键移动地图，默认禁用(可不写)
  },100)   
})
$(".map_pos_btn").click(function(){
  if(myChart.isClear){
    myChart.setOption(initData)
    ply(res); 
    myChart.isClear = false
  }else{
    myChart.clear();
    myChart.isClear = true    
  }
})


//状态选择事件
$(".state_select").change(function(){
  //先清空其他
  $(".area_select1").val("");
  $(".area_select2").val("");
  $(".m_code").val("");

  var v = this.value;
  if(v){
    var arr = []
    for(var i=0;i<zd.length;i++){
        if(zd[i].state.indexOf(v) != -1 )  arr.push(zd[i])
    }
  }else{
    // 当选择全部时
    arr = zd
  }
  option.series = getseries(arr)
  myChart.clear();
  myChart.setOption(option);  
  ply(res);   
})


//点击事件
// 搜索
$(".m_submit").click(function(){
  var select1 = $(".area_select1").val();
  var select2 = $(".area_select2").val();
  var state = $(".state_select").val();
  var ip_num = $.trim( $(".m_code").val());
  if(state == '' && ip_num == '' && select1 == '' && select2 == '')  return false;
  var arr = [];
  $.each(zd,function(k,v){
      if( (select1 == "" || select1 == v.a) &&    
          (select2 == "" || select2 == v.name) && 
          (state == "" || state == v.state) && 
          (ip_num == "" || ip_num == v.ip) ){
        arr.push(v)
      } 
  })
  option.series = getseries(arr)
  //当只有一个结果时，默认选中
  if(arr.length == 1){
      option.series[0].symbolSize = 30
      option.series[0].rippleEffect.scale = 10    
      setTimeout(function(){
          // zdinfo_show(arr[0].name)
      },0)
  }

  myChart.clear();
  myChart.setOption(option);  
  ply(res);  
})

//清除
$(".m_clear").click(function(){
  $(".state_select").val("");
  $(".area_select1").val("");
  $(".area_select2").val("");
  $(".m_code").val("");

  myChart.clear();
  myChart.setOption(initData) 
  ply(res); 
})


//搜索选择框渲染
var s_arr = [];
for(var i=0;i<zd.length;i++){
    if(s_arr.indexOf(zd[i].a) == -1){
        s_arr.push(zd[i].a)
        $(".area_select1").append('<option value="'+zd[i].a+'">'+zd[i].a+'</option>')
    }  
}
$(".area_select1").change(function(){
    var v = this.value;
    var str = '<option value="" style="color:#ccc;">请选择</option>';
    $.each(zd,function(k,val){
        if(this.a == v) str += '<option value="'+this.name+'">'+this.name+'</option>'
    })
    $(".area_select2").html(str)
})



})